<template>
  <div>
    <mt-datetime-picker ref="picker" type="date" v-model="pickerValue"  :startDate="startDate" :endDate="endDate">
    </mt-datetime-picker>
    <div>{{pickerValue}}</div>
    <p>start:{{startDate}}</p>
    <p>end:{{endDate}}</p>
    <span>字体多大</span>
    <mt-button type="danger" @click="chooseTime">时间控件</mt-button>
  </div>
</template>

<script>
export default {
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    chooseTime() {
      this.openPicker();
    }
  },
  data() {
    return {
      pickerValue: "",
      startDate: new Date("1950-01-01"),
      endDate: new Date("2017-08-01")
    };
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  width: 5rem;
  height: 0.5rem;
}
</style>
